<script setup>
import { ref } from 'vue';

const newRow = ref({ name: '' });
const rows = ref([
  { id: 1, name: '宝马', time: new Date('2024-10-25T09:08:18').getTime(), isEnabled: true },
  { id: 2, name: '奔驰', time: new Date('2024-10-25T09:08:18').getTime(), isEnabled: false },
  { id: 3, name: '奥迪', time: new Date('2024-10-25T09:08:18').getTime(), isEnabled: true },
]);

const addRow = function (){
  if (newRow.value.name === '') {
    alert('品牌名不能够为空');
    return;
  }
  const newRowData = {
    id: rows.value.length + 1,
    name: newRow.value.name,
    time: Date.now(),
    isEnabled: true,
  };
  rows.value.push(newRowData);
  newRow.value.name = '';
}

const deleteRow = function (index){
  rows.value.splice(index, 1);
}

const formatDate = function (time){
  const date = new Date(time);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  const formattedMonth = (month < 10 ? '0' : '') + month;
  const formattedDay = (day < 10 ? '0' : '') + day;
  const formattedHour = (hour < 10 ? '0' : '') + hour;
  const formattedMinutes = (minutes < 10 ? '0' : '') + minutes;
  const formattedSeconds = (seconds < 10 ? '0' : '') + seconds;

  return `${year}-${formattedMonth}-${formattedDay} ` +
      `${formattedHour}:${formattedMinutes}:${formattedSeconds}`;
}
</script>

<template>
  <div id="app">
    <div class="container bg-light border rounded-top mt-5 p-2 ps-4">添加品牌</div>

    <div class="container bg-white border rounded-bottom">
      <div class="p-4 input-group d-flex">
        <div class="bg-light rounded-start px-2 pt-2 border">品牌名称</div>
        <input v-model="newRow.name" id="NameInput" class="rounded-end me-2 ps-2 border no-outline" type="text" placeholder="请输入品牌名称">
        <button @click="addRow" id="addBtn" class="btn bg-primary rounded text-white mx-2">添加</button>
        <router-link to="/loginHome" class="btn bg-danger rounded text-white mx-4">前往黑马头条页</router-link>
        <router-link to="/login" class="btn bg-danger rounded text-white mx-2">前往购物车页</router-link>
      </div>
    </div>

    <table class="container table table-striped table-bordered mt-3">
      <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">品牌名称</th>
        <th scope="col">状态</th>
        <th scope="col">创建时间</th>
        <th scope="col">操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(row, index) in rows" :key="row.id">
        <th scope="row">{{ index + 1 }}</th>
        <td>{{ row.name }}</td>
        <td>
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" v-model="row.isEnabled">
            <label class="form-check-label">{{ row.isEnabled ? '已启用' : '已停用' }}</label>
          </div>
        </td>
        <td>{{ formatDate(row.time) }}</td>
        <td><a href="#" class="delete-row text-decoration-none" @click="deleteRow(index)">删除</a></td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<style>
@import "@/assets/bootstrap.min.css";
* {
  margin: 0;
  padding: 0;
}
.no-outline:focus {
  outline: none;
}
</style>